<template>
  <div id="container"></div>
  <div class="informations">
    <div class="info card">
      <h4>预报天气</h4>
      <p id="forecast"></p>
    </div>
    <div class="info card">
      <h4>交通提醒</h4>
      <p class="traffic">前方古庸路区拥塞，可选择其他路线</p>
      <p class="traffic">前方红绿灯，请注意停车</p>
      <p class="traffic">前方以往事故发生多，请注意开车</p>
      <!-- <p class="traffic"></p> -->
    </div>
    <div class="info card">
      <h4>土质检测</h4>
      <p class="land">
        张家界的土质以山地黄壤和红壤为主，富含有机质，pH值偏酸性，适合森林植被生长。由于其独特的地貌和湿润的气候，土壤具有良好的透气性和保水性，但部分地区因地形陡峭，存在一定的水土流失风险。总体而言，张家界的土质适宜生态旅游和自然保护，但在农业开发中需注意水土保持和土壤肥力管理
      </p>
    </div>
    <div class="info card">
      <h4>国需</h4>
      <p class="country"></p>
    </div>
  </div>

  <div class="cookieCard">
    <p class="cookieHeading">解决方案</p>
    <p class="cookieDescription">
      根据张家界永定区的土质检测结果（以酸性黄壤和红壤为主，有机质含量较高，透气性和保水性良好）、气候条件（亚热带季风气候，雨量充沛，四季分明）以及交通状况（山区地形复杂，交通相对不便），农业发展的重点应放在生态农业和特色种植上。首先，可以大力发展适合酸性土壤的经济作物，如茶叶、柑橘、猕猴桃等，这些作物不仅能适应土壤特性，还具有较高的经济价值。其次，利用当地湿润的气候条件，推广林下经济，种植中药材（如黄精、天麻）或食用菌（如香菇、木耳），既能保护生态环境，又能增加农民收入。此外，结合张家界的旅游优势，发展观光农业，打造集采摘、体验、休闲于一体的农业生态园，吸引游客参与。为应对交通不便的问题，可通过电商平台和冷链物流拓宽销售渠道，提升农产品附加值。总之，永定区应立足生态优势，发展高附加值、低环境影响的特色农业，实现农业与旅游、生态保护的有机结合。
      <!-- <a href="#">What for?</a> -->
    </p>
    <button class="acceptButton">了解更多</button>
  </div>

  <!-- <div class="plan">
    <div class="title">解决方案</div>
    <div class="content"></div>
  </div> -->
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted } from 'vue'

let map = null
let zoom = null
let center = null
window._AMapSecurityConfig = {
  securityJsCode: 'b86122b3e929835b077b9fb2e9380739',
}
onMounted(() => {
  // JS API加载器，可多次调用加载器
  AMapLoader.load({
    key: 'cc1ae41a8dd961d6129825a8ac26d591',
    version: '2.0',
    plugins: [],
  })
    .then((AMap) => {
      map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.486409, 39.921489],
        zoom: 12,
      })

      AMap.plugin(
        //肯定是单数
        ['AMap.DistrictSearch', 'AMap.TileLayer', 'AMap.Marker', 'AMap.Polyline', 'AMap.Weather'],
        function () {
          let weather = new AMap.Weather()
          //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
          weather.getLive('朝阳区', function (err, data) {
            if (!err) {
              var str = []
              str.push('<h4 >实时天气' + '</h4><hr>')
              str.push('<p>城市/区：' + data.city + '</p>')
              str.push('<p>天气：' + data.weather + '</p>')
              str.push('<p>温度：' + data.temperature + '℃</p>')
              str.push('<p>风向：' + data.windDirection + '</p>')
              str.push('<p>风力：' + data.windPower + ' 级</p>')
              str.push('<p>空气湿度：' + data.humidity + '</p>')
              str.push('<p>发布时间：' + data.reportTime + '</p>')
              var marker = new AMap.Marker({ map: map, position: map.getCenter() })
              var infoWin = new AMap.InfoWindow({
                content:
                  '<div class="info" style="position:inherit;margin-bottom:0;background-color: rgba(255, 255, 255, 0.8);padding: 20px;border-radius: 20px;">' +
                  str.join('') +
                  '</div><div class="sharp"></div>',
                isCustom: true,
                offset: new AMap.Pixel(0, -37),
              })
              infoWin.open(map, marker.getPosition())
              marker.on('mouseover', function () {
                infoWin.open(map, marker.getPosition())
              })
            }
          })
          //未来4天天气预报
          weather.getForecast('朝阳区', function (err, data) {
            if (err) {
              return
            }
            var str = []
            for (var i = 0, dayWeather; i < data.forecasts.length; i++) {
              dayWeather = data.forecasts[i]
              str.push(
                dayWeather.date +
                  ' <span class="weather">' +
                  dayWeather.dayWeather +
                  '</span> ' +
                  dayWeather.nightTemp +
                  '~' +
                  dayWeather.dayTemp +
                  '℃',
              )
            }
            document.getElementById('forecast').innerHTML = str.join('<br>')
            // document.getElementById('forecast').style.padding = '20px'
          })
        },
      )
    })
    .catch((e) => {
      console.log(e)
    })
})
onUnmounted(() => {
  map?.destory()
})
</script>

<style lang="scss" scoped>
#container {
  height: 500px;
  width: 100%;
}

.informations {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;

  .info {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid $primary-border-color;
    // background-color: $primary-background-color;

    #forecast,
    .traffic {
      line-height: 40px;
    }

    #forecast {
      color: red;
    }

    .traffic {
      color: #22ab30;
    }

    .land {
      margin-top: 10px;
      text-indent: 2rem;
      color: $primary-gray-text-color;
    }

    span {
    }
  }

  /* From Uiverse.io by SharpTH */
  .card {
    cursor: pointer;
    // width: 190px;
    // height: 254px;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 255, 0.2);
    transition: all 0.2s;
    box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2);
  }

  //   .card:hover {
  //     box-shadow: -8px 8px 2px -1px rgba(0, 0, 255, 0.2);
  //   }
}

/* From Uiverse.io by vinodjangid07 */
.cookieCard {
  width: calc(100vw - 340px);
  margin: 0 20px 20px;
  //   height: 200px;
  background: linear-gradient(to right, rgb(137, 104, 255), rgb(175, 152, 255));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.cookieCard::before {
  width: 150px;
  height: 150px;
  content: '';
  background: linear-gradient(to right, rgb(142, 110, 255), rgb(208, 195, 255));
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  right: -25%;
  top: -25%;
}

.cookieHeading {
  font-size: 1.5em;
  font-weight: 600;
  color: rgb(241, 241, 241);
  z-index: 2;
}

.cookieDescription {
  font-size: 0.9em;
  color: rgb(241, 241, 241);
  z-index: 2;
}

.cookieDescription a {
  color: rgb(241, 241, 241);
}

.acceptButton {
  padding: 11px 20px;
  background-color: #7b57ff;
  transition-duration: 0.2s;
  border: none;
  color: rgb(241, 241, 241);
  cursor: pointer;
  font-weight: 600;
  z-index: 2;
}

.acceptButton:hover {
  background-color: #714aff;
  transition-duration: 0.2s;
}

.plan {
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-color: #529b2e;
  margin: 20px;
  border-radius: 10px;

  .title {
    // color: #22ab30;
    background-color: white;
    padding: 5px;
  }

  .content {
    background-color: white;
    padding: 5px;
    text-indent: 2rem;
  }
}
</style>
